<template>
    <div class="ordering">
        <div class="heading">学生列表</div>
        <div>
            <div class="MBTI-user">
                <el-input v-model="studentId" size="small" placeholder="输入学号" class="inptflex" />
                <el-button type="primary" size="small" @click="select">查找</el-button>
            </div>
        </div>

        <el-table :data="studentdata" style="width: 100%" :stripe="true">
            <el-table-column fixed prop="StudentID" label="学号" min-width="100" align="center" />
            <el-table-column prop="StuidentName" label="姓名" min-width="100" align="center" />
            <el-table-column prop="time" label="测试时间" min-width="100" align="center" />
            <el-table-column prop="MBTIcode" label="MBTI_CODE" min-width="100" align="center" />
            <el-table-column fixed="right" label="Operations" width="120">
            <template #default = "scope">
                <el-button text link type="primary" size="small" @click="selection(scope.row.time)">查看选项</el-button>
            </template>
                

            </el-table-column>
        </el-table>
        <el-drawer v-model="table" title="学生选项" direction="rtl" size="50%">
            <el-table :data="gridData" :stripe="true">
                <el-table-column property="answer_1" label="answer_1" width="150" />
                <el-table-column property="answer_2" label="answer_2" width="150" />
                <el-table-column property="answer_3" label="answer_3" width="150" />
                <el-table-column property="answer_4" label="answer_4" width="150" />
                <el-table-column property="answer_5" label="answer_5" width="150" />
                <el-table-column property="answer_6" label="answer_6" width="150" />
                <el-table-column property="answer_7" label="answer_7" width="150" />
                <el-table-column property="answer_8" label="answer_8" width="150" />
                <el-table-column property="answer_9" label="answer_9" width="150" />
                <el-table-column property="answer_10" label="answer_10" width="150" />
                <el-table-column property="answer_11" label="answer_11" width="150" />
                <el-table-column property="answer_12" label="answer_12" width="150" />
                <el-table-column property="answer_13" label="answer_13" width="150" />
                <el-table-column property="answer_14" label="answer_14" width="150" />
                <el-table-column property="answer_15" label="answer_15" width="150" />
                <el-table-column property="answer_16" label="answer_16" width="150" />
                <el-table-column property="answer_17" label="answer_17" width="150" />
                <el-table-column property="answer_18" label="answer_18" width="150" />
                <el-table-column property="answer_19" label="answer_19" width="150" />
                <el-table-column property="answer_20" label="answer_20" width="150" />
                <el-table-column property="answer_21" label="answer_21" width="150" />
                <el-table-column property="answer_22" label="answer_22" width="150" />
                <el-table-column property="answer_23" label="answer_23" width="150" />
                <el-table-column property="answer_24" label="answer_24" width="150" />
                <el-table-column property="answer_25" label="answer_25" width="150" />
                <el-table-column property="answer_26" label="answer_26" width="150" />
                <el-table-column property="answer_27" label="answer_27" width="150" />
                <el-table-column property="answer_28" label="answer_28" width="150" />
                <el-table-column property="answer_29" label="answer_29" width="150" />
                <el-table-column property="answer_30" label="answer_30" width="150" />
                <el-table-column property="answer_31" label="answer_31" width="150" />
                <el-table-column property="answer_32" label="answer_32" width="150" />
                <el-table-column property="answer_33" label="answer_33" width="150" />
                <el-table-column property="answer_34" label="answer_34" width="150" />
                <el-table-column property="answer_35" label="answer_35" width="150" />
                <el-table-column property="answer_36" label="answer_36" width="150" />
                <el-table-column property="answer_37" label="answer_37" width="150" />
                <el-table-column property="answer_38" label="answer_38" width="150" />
                <el-table-column property="answer_39" label="answer_39" width="150" />
                <el-table-column property="answer_40" label="answer_40" width="150" />
                <el-table-column property="answer_41" label="answer_41" width="150" />
                <el-table-column property="answer_42" label="answer_42" width="150" />
                <el-table-column property="answer_43" label="answer_43" width="150" />
                <el-table-column property="answer_44" label="answer_44" width="150" />
                <el-table-column property="answer_45" label="answer_45" width="150" />
                <el-table-column property="answer_46" label="answer_46" width="150" />
                <el-table-column property="answer_47" label="answer_47" width="150" />
                <el-table-column property="answer_48" label="answer_48" width="150" />
                <el-table-column property="answer_49" label="answer_49" width="150" />
                <el-table-column property="answer_51" label="answer_51" width="150" />
                <el-table-column property="answer_52" label="answer_52" width="150" />
                <el-table-column property="answer_53" label="answer_53" width="150" />
                <el-table-column property="answer_54" label="answer_54" width="150" />
                <el-table-column property="answer_55" label="answer_55" width="150" />
                <el-table-column property="answer_56" label="answer_56" width="150" />
                <el-table-column property="answer_57" label="answer_57" width="150" />
                <el-table-column property="answer_58" label="answer_58" width="150" />
                <el-table-column property="answer_59" label="answer_59" width="150" />
                <el-table-column property="answer_60" label="answer_60" width="150" />
                <el-table-column property="answer_61" label="answer_61" width="150" />
                <el-table-column property="answer_62" label="answer_62" width="150" />
                <el-table-column property="answer_63" label="answer_63" width="150" />
                <el-table-column property="answer_64" label="answer_64" width="150" />
                <el-table-column property="answer_65" label="answer_65" width="150" />
                <el-table-column property="answer_66" label="answer_66" width="150" />
                <el-table-column property="answer_67" label="answer_67" width="150" />
                <el-table-column property="answer_68" label="answer_68" width="150" />
                <el-table-column property="answer_69" label="answer_69" width="150" />
                <el-table-column property="answer_70" label="answer_70" width="150" />
                <el-table-column property="answer_71" label="answer_71" width="150" />
                <el-table-column property="answer_72" label="answer_72" width="150" />
                <el-table-column property="answer_73" label="answer_73" width="150" />
                <el-table-column property="answer_74" label="answer_74" width="150" />
                <el-table-column property="answer_75" label="answer_75" width="150" />
                <el-table-column property="answer_76" label="answer_76" width="150" />
                <el-table-column property="answer_77" label="answer_77" width="150" />
                <el-table-column property="answer_78" label="answer_78" width="150" />
                <el-table-column property="answer_79" label="answer_79" width="150" />
                <el-table-column property="answer_80" label="answer_80" width="150" />
                <el-table-column property="answer_81" label="answer_81" width="150" />
                <el-table-column property="answer_82" label="answer_82" width="150" />
                <el-table-column property="answer_83" label="answer_83" width="150" />
                <el-table-column property="answer_84" label="answer_84" width="150" />
                <el-table-column property="answer_85" label="answer_85" width="150" />
                <el-table-column property="answer_86" label="answer_86" width="150" />
                <el-table-column property="answer_87" label="answer_87" width="150" />
                <el-table-column property="answer_88" label="answer_88" width="150" />
                <el-table-column property="answer_89" label="answer_89" width="150" />
                <el-table-column property="answer_90" label="answer_90" width="150" />
                <el-table-column property="answer_91" label="answer_91" width="150" />
                <el-table-column property="answer_92" label="answer_92" width="150" />
                <el-table-column property="answer_93" label="answer_93" width="150" />
            </el-table>
        </el-drawer>



    </div>


</template>


<script>
import { ElMessage,ElMessageBox  } from 'element-plus'

import { reactive ,toRefs,getCurrentInstance, ref} from 'vue'
export default{
    setup(){
        const table = ref(false)
        const {proxy} = getCurrentInstance()
        const studentid = reactive({
            studentId:""
        })

        const gridData = ref([])
        //  const gridData =ref ([{
        //             answer_1: "",
        //             answer_2: "",
        //             answer_3: "",
        //             answer_4: "",
        //             answer_5: "",
        //             answer_6: "",
        //             answer_7: "",
        //             answer_8: "",
        //             answer_9: "",
        //             answer_10: "",
        //             answer_11: "",
        //             answer_12: "",
        //             answer_13: "",
        //             answer_14: "",
        //             answer_15: "",
        //             answer_16: "",
        //             answer_17: "",
        //             answer_18: "",
        //             answer_19: "",
        //             answer_20: "",
        //             answer_21: "",
        //             answer_22: "",
        //             answer_23: "",
        //             answer_24: "",
        //             answer_25: "",
        //             answer_26: "",
        //             answer_27: "",
        //             answer_28: "",
        //             answer_29: "",
        //             answer_30: "",
        //             answer_31: "",
        //             answer_32: "",
        //             answer_33: "",
        //             answer_34: "",
        //             answer_35: "",
        //             answer_36: "",
        //             answer_37: "",
        //             answer_38: "",
        //             answer_39: "",
        //             answer_40: "",
        //             answer_41: "",
        //             answer_42: "",
        //             answer_43: "",
        //             answer_44: "",
        //             answer_45: "",
        //             answer_46: "",
        //             answer_47: "",
        //             answer_48: "",
        //             answer_49: "",
        //             answer_50: "",
        //             answer_51: "",
        //             answer_52: "",
        //             answer_53: "",
        //             answer_54: "",
        //             answer_55: "",
        //             answer_56: "",
        //             answer_57: "",
        //             answer_58: "",
        //             answer_59: "",
        //             answer_60: "",
        //             answer_61: "",
        //             answer_62: "",
        //             answer_63: "",
        //             answer_64: "",
        //             answer_65: "",
        //             answer_66: "",
        //             answer_67: "",
        //             answer_68: "",
        //             answer_69: "",
        //             answer_70: "",
        //             answer_71: "",
        //             answer_72: "",
        //             answer_73: "",
        //             answer_74: "",
        //             answer_75: "",
        //             answer_76: "",
        //             answer_77: "",
        //             answer_78: "",
        //             answer_79: "",
        //             answer_80: "",
        //             answer_81: "",
        //             answer_82: "",
        //             answer_83: "",
        //             answer_84: "",
        //             answer_85: "",
        //             answer_86: "",
        //             answer_87: "",
        //             answer_88: "",
        //             answer_89: "",
        //             answer_90: "",
        //             answer_91: "",
        //             answer_92: "",
        //             answer_93: "",
        //         }]) 





           const studentdata = ref([{
                StudentID: '',
                StuidentName: '',
                time: '',
                MBTIcode: '',
    }])


        //   const gridData = reactive({
        //     datas:[]
        //   })
              
          
                

       const selection = async(Time)=>{
           table.value = true
             const obj3 = {
                 time: Time,
            }
            console.log(obj3)
            try {
                
                const res_selection = await new proxy.$request(proxy.$urls.m().GetAnswer, obj3).modepost()
                //  console.log(res_selection)
                if (res_selection.status = 200) {
                    // gridData.value = res_selection.value
                    // console.log(res_selection)
                    // console.log(res_selection.data)
                  // console.log(res_selection.data)
                  // console.log(gridData.value)
                   gridData.value.push(res_selection.data)
                   console.log(gridData.value)
                   //gridData.value = res_selection.data
     
                    
                } else {
                    ElMessage('请重新输入')
                }

            } catch (e) {
                // new proxy.$tips('服务器错误').message()
            }


        }


      
  

        const select = async () => {

            const obj2 = {
                 StudentID: studentid.studentId,
            }

            try {
                
                const res_person = await new proxy.$request(proxy.$urls.m().person_result, obj2).modepost()
                
                if (res_person.status = 200) {
                    studentdata.value = res_person.data.StudentList
                    // console.log(studentdata.value[0])
                } else {
                    ElMessage('请重新输入')
                }

            } catch (e) {
                // new proxy.$tips('服务器错误').message()
            }


        }
        return{gridData, selection, table, studentdata,select,proxy, ...toRefs(studentid), }
    }
}


</script>



<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>






